<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/background.css">
    <link rel="stylesheet" href="./CSS/begin.css">
    <link rel="stylesheet" href="./CSS/cursor.css">
    <link rel="stylesheet" href="./CSS/ball.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
</head>

<body>
    <div class="cursor"></div>
    <div id="app">
        <div class="register_overlay" v-if="!isInputFilled"></div>
        <div class="register_box" :class="{'register_box_fixed': isInputFilled}">
            <span class="user_id" v-if="isInputFilled" @click="editUserId" :title="text_register">{{ text_register }}</span>
            <input type="text" v-show="showInput" placeholder="PLAYER ID" @blur="onBlur" @keyup.enter="onBlur">
            <div class="timer" v-if="showTimer">{{formatTime(seconds)}}</div>
            <button class="restart_btn" v-if="showTimer" @click="fn_restart" title="重新开始">
                <svg class="restart_icon" width="28" height="28" viewBox="0 0 28 28" fill="none">
                  <circle cx="14" cy="14" r="12" stroke="#6f67a4" stroke-width="2.5" fill="url(#grad)"/>
                  <defs>
                    <linearGradient id="grad" x1="0" y1="0" x2="28" y2="28">
                      <stop offset="0%" stop-color="#e0e7ff"/>
                      <stop offset="100%" stop-color="#f0f0ff"/>
                    </linearGradient>
                  </defs>
                  <path d="M18 10l-4 4 4 4" stroke="#6f67a4" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                  <path d="M10 14h8" stroke="#6f67a4" stroke-width="2.5" stroke-linecap="round" fill="none"/>
                </svg>
            </button>
            <button class="rank_btn" v-if="showTimer" @click="showRank = true" title="排行榜">
                <svg class="rank_icon" width="28" height="28" viewBox="0 0 28 28" fill="none">
                  <circle cx="14" cy="14" r="12" stroke="#f7b731" stroke-width="2.5" fill="url(#rankgrad)"/>
                  <defs>
                    <linearGradient id="rankgrad" x1="0" y1="0" x2="28" y2="28">
                      <stop offset="0%" stop-color="#fffbe7"/>
                      <stop offset="100%" stop-color="#ffe082"/>
                    </linearGradient>
                  </defs>
                  <path d="M9 19h10M11 19V9a3 3 0 1 1 6 0v10" stroke="#f7b731" stroke-width="2" stroke-linecap="round"/>
                  <path d="M14 23v-4" stroke="#f7b731" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </button>
            <button class="register" v-if="!isInputFilled" @click="fn_register">{{text_register}}</button>
            <h1 class="warning" v-show="showwarning">The Player ID cannot consist solely of spaces.</h1>
        </div>
        <div class="rank_popup" v-if="showRank">
            <div class="rank_popup_content">
                <h2>排行榜</h2>
                <table class="rank_table">
                    <thead>
                        <tr><th>排名</th><th>用户名</th><th>用时</th></tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, idx) in rankList" :key="item.name + item.time + idx">
                            <td>{{ idx + 1 }}</td>
                            <td class="rank_name_cell" :title="item.name">{{ item.name }}</td>
                            <td>{{ item.time }}</td>
                        </tr>
                    </tbody>
                </table>
                <button class="rank_close_btn" @click="showRank = false">关闭</button>
            </div>
        </div>

        <audio ref="backgroundMusic" loop>
            <source src="./Laura Shigihara-Mountains.mp3" type="audio/mpeg">
        </audio>
        <div class="start_part" v-if="showGround1">
            <span class="iconfont icon-kaishi start" @click="fn_start"></span>
            <div class="start_text">
                <h1 v-on:mouseenter="fn_hover">开</h1>
                <h1 v-on:mouseenter="fn_hover">始</h1>
                <h1 v-on:mouseenter="fn_hover">游</h1>
                <h1 v-on:mouseenter="fn_hover">戏</h1>
            </div>
        </div>
        <span class="iconfont icon-yinle music" @click="fn_music"></span>
        <div class="game_board" v-show="showgame_board">
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b1" v-show="showb[0]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[0] === 0 ? 'transparent' : colorb[0] === 1 ? 'red' : 'blue'}">

                </div>
            </div>
            <div class="wrong"></div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b7" v-show="showb[6]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[6] === 0 ? 'transparent' : colorb[6] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="wrong"></div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b8" v-show="showb[7]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[7] === 0 ? 'transparent' : colorb[7] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b2" v-show="showb[1]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[1] === 0 ? 'transparent' : colorb[1] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b4" v-show="showb[3]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[3] === 0 ? 'transparent' : colorb[3] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b5" v-show="showb[4]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[4] === 0 ? 'transparent' : colorb[4] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b6" v-show="showb[5]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[5] === 0 ? 'transparent' : colorb[5] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b9" v-show="showb[8]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[8] === 0 ? 'transparent' : colorb[8] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b3" v-show="showb[2]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[2] === 0 ? 'transparent' : colorb[2] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
            <div class="wrong"></div>
            <div class="wrong"></div>
            <div class="wrong"></div>
            <div class="right" @click="fn_click_right">
                <svg>
                    <rect />
                </svg>
                <div class="ball" id="b10" v-show="showb[9]" @click="fn_click_ball"
                    :style="{backgroundColor: colorb[9] === 0 ? 'transparent' : colorb[9] === 1 ? 'red' : 'blue'}">
                </div>
            </div>
        </div>
        <div class="win_popup" v-if="showWinPopup">
            <div class="win_popup_content">
                <h2>恭喜你获胜</h2>
                <p>用时：{{ winTime }}</p>
                <button class="close_win_popup" @click="showWinPopup = false">关闭</button>
            </div>
        </div>
        <div class="guide_popup" v-if="showGuide">
            <div class="guide_popup_content">
                <h2>游戏玩法说明</h2>
                <ul>
                    <li>1. 点击用户名进行修改。</li>
                    <li>2. 选择第一个球后计时器开始计时。</li>
                    <li>3. 通过点击球和空位，移动球完成目标。</li>
                    <li style="color:#4caf50;font-weight:bold;">
                        4. 获胜条件：<br>
                        &nbsp;&nbsp;• 所有红球全部移动到最右侧，所有蓝球全部移动到最左侧。<br>
                        &nbsp;&nbsp;• 中间不能有空位，红蓝球不能混杂。<br>
                        &nbsp;&nbsp;• 达成后会弹出胜利提示和用时。
                    </li>
                    <li>5. 可随时点击重置按钮重新开始本局。</li>
                </ul>
                <button class="guide_start_btn" @click="closeGuide">我知道了，开始游戏</button>
            </div>
        </div>
    </div>
    <script src="./JS/v2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
    <script src="./JS/cursor.js"></script>
    <script src="./JS/VUE.js"></script>
</body>

</html>